Fountain Finder
Frontend
Backend
UX/UI Design
1 personne
3 jours
Fountain Finder est une application conçue pour vérifier en temps réel la disponibilité des fontaines à eau de Paris. La disponibilité signifie ici que les fontaines fournissent effectivement de l'eau. Ce projet offre une solution pratique pour les utilisateurs qui souhaitent trouver rapidement une fontaine en état de marche dans Paris.
Introduction
Ce projet est né de l'envie de moderniser un concept initial développé lors d’un projet universitaire, qui avait été réalisé en HTML, CSS et JavaScript. La nouvelle version utilise React pour proposer une application plus performante et optimisée. Elle apporte aussi une interface utilisateur (UI) modernisée, avec de nouveaux curseurs et une amélioration générale de l’expérience visuelle et interactive.
Carte de Paris
L’application s’appuie sur une carte de Paris fournie par la bibliothèque Leaflet. Cette carte affiche en détail les rues, arrondissements, et bâtiments de la ville, offrant une vue complète de Paris et facilitant la navigation. L’intégration de Leaflet permet de créer une carte dynamique qui suit les interactions des utilisateurs tout en restant légère et rapide.
Affichage des fontaines
Les fontaines à eau de Paris sont récupérées à partir de l’API des eaux de Paris, qui répertorie toutes les fontaines de la ville et ses environs. Chaque fontaine est représentée sur la carte avec des informations clés telles que la rue où elle se trouve, son type (fontaine classique, mur d’eau, etc.) et surtout sa disponibilité. Cette fonctionnalité permet d’avoir une vue claire de l’état des fontaines à tout moment.
Clusters de fontaines
Afficher plusieurs milliers de points d’intérêts, comme les fontaines, peut rapidement alourdir l’application et affecter ses performances. Pour éviter cela, j’ai implémenté un système de clusters. Ces clusters regroupent plusieurs fontaines proches géographiquement, réduisant ainsi le nombre d'éléments affichés en même temps et optimisant les performances. Chaque cluster affiche le nombre de fontaines présentes dans sa zone, offrant un aperçu rapide sans surcharger l’écran.
Markers personnalisés
Les markers des fontaines ont été entièrement personnalisés pour cette version de l’application. Contrairement aux markers standards fournis par Leaflet, j’ai conçu des markers spécifiques qui affichent une image correspondant au type de fontaine. Cela permet une meilleure distinction visuelle entre les différents types de fontaines, améliorant ainsi l'expérience utilisateur. C’est une évolution par rapport à la version précédente, où un seul type de marker était utilisé pour toutes les fontaines.
Système de filtres
Le système de filtres de Fountain Finder permet une recherche précise et personnalisée des fontaines. Grâce à des options avancées, l’utilisateur peut filtrer les fontaines par disponibilité (ouvertes ou fermées), par arrondissement, et par type de fontaine (classique, à eau potable, décorative, etc.). Un bouton de réinitialisation est également disponible pour remettre les filtres à zéro et afficher à nouveau toutes les fontaines.
